<template>
  <view class="article-item" style="border: 1px solid #ffffff; border-radius: 5px;">
    <h2 class="title">{{ title }}</h2>
    <p class="description" v-html="description" ></p>
    <div class="metadata">
      <div class="tag">
        <button v-if="tags" :style="{ backgroundColor: getRandomColor(), color: 'white' }" class="tag-button">
          {{ tags }}
        </button>
      </div>
      <div class="details">
        <div class="comments">
          <span>{{ comments }} 评论</span>
        </div>
        <div class="views">
          <span>{{ views }} 浏览</span>
        </div>
        <div class="likes" @click="handleLike">
          <span>{{ likes }} 点赞</span>
        </div>
        <div class="avatar">
        <!-- <img :src="author" alt="Author Avatar" /> -->
		  <!-- <image id='img' :mode="model"
		  	 :v-lazy="imgTest"> -->
		  <!-- </image> -->
		  <!-- 懒加载 -->
		 <img v-lazy="author"  alt="Author Avatar">
        </div>
      </div>
    </div>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
  title: String,
  description: String,
  comments: Number,
  views: Number,
  initialLikes: Number,
  author: Object,
  tags: Array
});

const emit = defineEmits(['update:likes']);

const likes = ref(props.initialLikes);

const imgTest = ref("http://localhost:5173/static/img/4.jpg");

const handleLike = () => {
  likes.value++;
  emit('update:likes', likes.value);
};

const colors = ['#ff6b6b', '#6b42ff', '#42d3ff', '#ff4242', '#42ff6b', '#ff6b42', '#6b42ff', '#42d3ff', '#ff4242', '#42ff6b', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b'];
const getRandomColor = () => {
  const randomIndex = Math.floor(Math.random() * colors.length);
  return colors[randomIndex];
};
</script>

<style scoped>
.article-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  border: 1px solid red; /* 文章列表项边框颜色 */
  background: #f9f9f9; /* 文章列表项背景颜色 */
  width: 100%; /* 宽度为100% */
  box-sizing: border-box; /* 确保内边距和边框不会增加总宽度 */
  animation: fadeInUp 1s ease-in-out;
}

.article-item:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.article-item .title {
  font-size: 1.3em;
  color: #330000; /* 文章标题颜色 */
  margin-bottom: 8px;
}

.article-item .description {
  color: #555; /* 文章描述颜色 */
  margin-bottom: 10px;
  overflow: hidden;
}

.article-item .metadata {
  color: #999; /* 元数据颜色 */
  font-size: 0.9em;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-item .metadata .tag {
  display: flex;
  align-items: center;
  gap: 5px;
}

.article-item .metadata .tag .tag-button {
  border: none;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 0.8em;
  cursor: pointer;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
  width: 60px; /* 固定宽度 */
  height: 24px; /* 固定高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.article-item .metadata .tag .tag-button:hover {
  filter: brightness(90%);
}

.article-item .metadata .details {
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-item .metadata .details .comments,
.article-item .metadata .details .views,
.article-item .metadata .details .likes {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.article-item .metadata .details .likes {
  color: #007BFF;
}

.article-item .metadata .details .avatar {
  display: flex;
  align-items: center;
}

.article-item .metadata .details .avatar img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}



/* 动画 */
@keyframes fadeInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>